import { Children, useRef } from 'react'
import './style.less'

/**
 * @param title 标题
 * @param cols `string` 规定每行显示元素个数 如: 4,5:表示第一行4个第二行5个;3:表示每行3个，最多支持每行5个
 * @param width `string` 容器的宽
 **/
function DashBoxNoBorder(props) {
    const { title, children, cols = '1', width, height = '0px', noBorder = false, noTitle = true } = props
    let count = useRef(createCountArr(cols))
    // (count.current.length > 1? `${100 / Math.ceil(children.length / count.current.length)}%`
    const lineCount = cols.split(',').length

    let rowHeight = useRef((`${(parseInt(height, 10) - 10) / lineCount}px`))
    let childrenHeight = useRef(`${parseInt(height, 10)}px`)

    return (
        <div className={noBorder ? 'dash-box dash-box-no-border' : 'dash-box'} style={{ width, height }}>
            {!noTitle && (
                <div className='dash-title'>
                    <span className='title-bg'>{`${title}(${children.length > 1 ? children.length : 1})`}</span>
                </div>
            )}
            <div className='dash-children' style={{ height: childrenHeight.current }}>
                {
                    count.current.length > 1 && (children.length > 1
                        ? count.current.map((c, idx) => {
                            return (
                                <>
                                    {
                                        Children.map(children, (child, index) => {
                                            if (c === count.current[count.current.length - 1]) {
                                                if (index >= c) {
                                                    return (
                                                        <div>
                                                            <Col col={cols.split(',')[idx]} rowHeight={rowHeight.current}>
                                                                {child}
                                                            </Col>
                                                            <div>
                                                                hdivjjjskieikvjddjnxidiejgfthffffffffffffsdefdgdfgr
                                                                <div>
                                                                    <select name='xmmc' placeholder='请选择'>项目名称</select>
                                                                </div>
                                                                <div>
                                                                    <div>

                                                                        <select name='gclx' placeholder='请选择'>公差类型</select>
                                                                    </div>
                                                                    haidcmdkw,ffookwkskjdmxsiwfkgmfk
                                                                </div>
                                                                <input type="text" />
                                                                <Children>

                                                                </Children>
                                                            </div>
                                                        </div>
                                                    )
                                                }
                                            } else if (index >= c && index < count.current[idx + 1]) {
                                                return (
                                                    <Col col={cols.split(',')[idx]} rowHeight={rowHeight.current}>
                                                        {child}
                                                    </Col>
                                                )
                                            }
                                        })
                                    }
                                </>
                            )
                        }) : children)
                }
                {
                    count.current.length === 1 && Children.map(children, (child, index) => {
                        return (
                            <Col col={cols} rowHeight={rowHeight.current}>
                                {child}
                            </Col>
                        )
                    })
                }
            </div>
        </div>
    )
}

function Col(props) {
    return <div className={`col-${props.col} col-center`} style={{ height: props.rowHeight }}>{props.children}</div>
}

function createCountArr(str) {
    let arr = str.split(',')
    let crr = []
    arr.forEach((v, idx) => {
        let brr = arr.slice(0, idx)
        crr[idx] = sum(brr)
    })
    return crr
}
function sum(arr) {
    let s = 0
    arr.forEach((val, idx, arr) => {
        s += Number(val)
    }, 0)
    return s
}
export default DashBoxNoBorder
